/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx,vue}',
  ],
  theme: {
    extend: {
      colors: {
        // 主色调 - 深色主题
        ide: {
          // 背景色系
          bg: {
            primary: '#1E1E1E',    // 主背景色
            secondary: '#252526',   // 次要背景
            tertiary: '#2D2D2D',   // 第三层背景
            hover: '#2A2D2E',      // 悬停背景
            active: '#37373D',     // 激活状态背景
            selected: '#094771',    // 选中状态背景
            error: '#F85149',      // 错误背景
            warning: '#CCA700',     // 警告背景
            success: '#4EC9B0',     // 成功背景
          },
          // 边框色系
          border: {
            DEFAULT: '#323232',     // 默认边框
            hover: '#454545',       // 悬停边框
            focus: '#007FD4',       // 焦点边框
            divider: '#2D2D2D',     // 分割线
          },
          // 文本色系
          text: {
            primary: '#D4D4D4',     // 主要文本
            secondary: '#9D9D9D',   // 次要文本
            tertiary: '#6B6B6B',    // 第三级文本
            error: '#F85149',       // 错误文本
            warning: '#CCA700',     // 警告文本
            success: '#4EC9B0',     // 成功文本
            link: '#4EC9B0',        // 链接文本
          },
          // 控件色系
          control: {
            button: {
              DEFAULT: '#37373D',   // 按钮默认背景
              hover: '#45454D',     // 按钮悬停
              active: '#3D3D42',    // 按钮激活
              text: '#FFFFFF',      // 按钮文本
            },
            input: {
              bg: '#3C3C3C',        // 输入框背景
              border: '#3C3C3C',    // 输入框边框
              focus: '#007FD4',     // 输入框焦点
              text: '#D4D4D4',      // 输入框文本
            },
          },
          // 语法高亮色系
          syntax: {
            keyword: '#569CD6',     // 关键字
            string: '#CE9178',      // 字符串
            number: '#B5CEA8',      // 数字
            comment: '#6A9955',     // 注释
            function: '#DCDCAA',    // 函数
            variable: '#9CDCFE',    // 变量
            type: '#4EC9B0',        // 类型
          }
        }
      },
      // 阴影效果
      boxShadow: {
        'ide': '0 2px 4px 0 rgba(0, 0, 0, 0.2)',
        'ide-md': '0 4px 6px -1px rgba(0, 0, 0, 0.3)',
        'ide-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.4)',
        'ide-xl': '0 20px 25px -5px rgba(0, 0, 0, 0.5)',
      },
      // 圆角定制
      borderRadius: {
        'ide-sm': '2px',
        'ide-md': '4px',
        'ide-lg': '6px',
      },
      // 间距系统
      spacing: {
        'ide-1': '4px',
        'ide-2': '8px',
        'ide-3': '12px',
        'ide-4': '16px',
        'ide-5': '20px',
        'ide-6': '24px',
      },
      // 字体系统
      fontFamily: {
        'ide': [
          'JetBrains Mono',
          'Menlo',
          'Monaco',
          'Consolas',
          'monospace'
        ],
        'ide-ui': [
          '-apple-system',
          'BlinkMacSystemFont',
          'Segoe UI',
          'Roboto',
          'sans-serif'
        ],
      },
      // 字体大小
      fontSize: {
        'ide-xs': ['11px', '16px'],
        'ide-sm': ['12px', '18px'],
        'ide-base': ['13px', '20px'],
        'ide-lg': ['14px', '22px'],
      },
      // 过渡效果
      transitionProperty: {
        'ide': 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
      },
      transitionDuration: {
        'ide': '150ms',
      },
      transitionTimingFunction: {
        'ide': 'cubic-bezier(0.4, 0, 0.2, 1)',
      },
    },
  },
  plugins: [
    function({ addUtilities }) {
      const newUtilities = {
        // 滚动条美化
        '.scrollbar-ide': {
          '&::-webkit-scrollbar': {
            width: '8px',
            height: '8px',
          },
          '&::-webkit-scrollbar-track': {
            backgroundColor: '#1E1E1E',
          },
          '&::-webkit-scrollbar-thumb': {
            backgroundColor: '#424242',
            borderRadius: '4px',
            '&:hover': {
              backgroundColor: '#4F4F4F',
            },
          },
        },
        // 文本溢出处理
        '.text-ellipsis-ide': {
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
        },
        // 焦点轮廓
        '.focus-outline-ide': {
          '&:focus': {
            outline: 'none',
            boxShadow: '0 0 0 2px rgba(0, 127, 212, 0.5)',
          },
        },
      }
      addUtilities(newUtilities, ['hover', 'focus'])
    },
  ],
}